<template>
  <div id="myChart8"></div>
</template>

<script>
import * as echarts from "echarts";
import shangrao from "@/assets/shangrao.json";
export default {
  mounted() {
    //调用
    this.drawLine8();
  },
  methods: {
    drawLine8() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart8"));
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      echarts.registerMap("shangrao", shangrao);
      myChart.off("click");
      // 绘制图表
      myChart.setOption({
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "95%", //大小
        title: {
          //这里是标题
          top: "1%",
          left: "center", //标题居中显示
          textStyle: {
            //标题的样式
            fontSize: 20,
            fontWeight: 600,
            color: "#222",
          },
        },

        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)", // 提示框浮层的背景颜色。
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距，
          formatter: function (params) {
            let showname = params;
            console.log(params);
            return `
                <div style='width:150px;height:150px'>
                    <p  style="width:100%;height:30px; background: linear-gradient(#2caaab, #136692);  text-align: center;line-height: 30px;">测试标题</p>
                    <p  style="line-height: 30px; text-indent: 10px;">补助人数:${12}人</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助金额:${1}万元</p>
                    <p style="line-height: 30px; text-indent: 10px;" >支出比例:${24}%</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助发生率:${53}%</p> 
              </div>
              `;
          },
        },

        series: [
          {
            type: "map",
            map: "shangrao",
            roam: true, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: { color: "#fff" }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: "#70ccef" },
              },
            },
            // itemStyle: {
            //   normal: {
            //     borderWidth: 0.5, //区域边框宽度
            //     borderColor: "#70ccef", //区域边框颜色
            //     areaColor: "#124773", //区域颜色
            //     label: { show: true },
            //   },

            //   emphasis: {
            //     borderWidth: 0.95, //鼠标滑过区域，区域边框宽度
            //     borderColor: "#0084bf", //鼠标滑过区域，区域边框颜色
            //     areaColor: "#0084bf", //鼠标滑过区域背景色
            //     label: { show: true },
            //   },
            // }
          },
        ],
      });
    },
  },
};
</script>

<style>
#myChart8{
    width: 660px;
    height: 660px;
    border: 1px solid #000;
}
</style>